<template>
	<view class="m-pa-40">
		<view class="title">跳转未定义的页面：</view>
		<button
			size="mini"
			@click="jumpNotFound()"
		>
			跳转未定义的页面
		</button>
		<view class="title">运行全局方法：</view>
		<button
			size="mini"
			@click="runGlobalFun()"
		>
			运行全局方法
		</button>
		<view class="title">设置Vuex的值：</view>
		<button
			size="mini"
			@click="setVuexValue()"
		>
			设置 Vuex 中 vuex_token 的值
		</button>
		<view class="border">
			<text>vuex_token：</text>
			<br />
			<text>{{ vuex_token }}</text>
		</view>
		<view class="title">Flex布局 + CSS原子化：</view>
		<view class="m-flex">
			<view class="item m-flex-1 m-ma-10">
				<text class="m-ma-auto">1</text>
			</view>
			<view class="item m-flex-1 m-ma-10">
				<text class="m-ma-auto">2</text>
			</view>
			<view class="item m-flex-1 m-ma-10">
				<text class="m-ma-auto">3</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

defineOptions({
	name: 'HomeExample'
});

//跳转未定义页面
function jumpNotFound() {
	location.href = '/#/404';
}

//执行全局函数
function runGlobalFun() {
	proxy.UD_toast('执行全局函数', 'success');
}

//设置Vuex的值
function setVuexValue() {
	proxy.UD_setVuex('global', 'vuex_token', '1234567890');
	proxy.UD_toast('设置成功', 'success');
}
</script>

<style scoped lang="scss">
.title {
	width: 100%;
	text-align: left;
	font-weight: bold;
	font-size: 36rpx;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
}
.border {
	border: dotted 2rpx $uni-color-primary;
	padding: 20rpx;
}
.item {
	display: flex;
	color: white;
	text-align: center;
	aspect-ratio: 1 / 1;
	background-color: $uni-color-primary;
}
</style>
